<template>
    <div style="position: fixed; top: 0; width: 100%; z-index: 1">
        <van-dropdown-menu active-color="#f1929d">
            <van-dropdown-item v-model="order" :options="orderAry" @click="changeOrder"/>
        </van-dropdown-menu>
    </div>

    <div style="height: 60px; background-color: #e1e1e1"></div>

    <div class="title">共搜索到{{$route.query.keyword}}本子：{{ comic.total }}个</div>

    <div class="comic-list-container" ref="container">
        <long-list v-for="item in comic.message" :message="item" :key="item.id"></long-list>
        <div class="btn-container">
            <van-pagination v-model="comic.page" :page-count="comic.pages" :items-per-page="3" @change="changePage">
                <template #page="{ text }">{{ text }}</template>
            </van-pagination>
        </div>
    </div>
    <div style="height: 40px; background-color: grey"></div>

    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>

</template>

<script>
import {useRoute} from 'vue-router'
import longList from "@/components/main/part/longList";
import {onMounted, onActivated, onDeactivated, reactive, ref} from "vue";
import {_getComicSearch} from "@/apis/comicAPI";
import loadingBox from "@/components/main/part/loadingBox";

export default {
    name: "comicSearch",
    components: {
        longList,
        loadingBox
    },
    setup() {
        let route = useRoute()
        let keyword = route.query.keyword;
        let isShowLoadBtn = ref(true);
        let comic = reactive({
            message: [],
            pages: '',
            page:1,
            total: ''
        })
        let showToast = ref(true)

        const order = ref('UA');
        const orderAry = [
            {text: '默认', value: 'UA'},
            {text: '从新到旧', value: 'dd'},
            {text: '从旧到新', value: 'da'},
            {text: '最多爱心', value: 'ld'},
            {text: '最多指名', value: 'vd'},
        ];

        /*s must be one of [UA, CA, da, dd, ld, vd]*/
        function changeOrder() {
            getComicList(1, order.value, keyword)
        }

        async function getComicList(page, sort, keyword) {
            showToast.value = true
            const data = {page, sort, keyword};
            await _getComicSearch(data, res => {
                comic.message = res.data.data.comics.docs
                comic.pages = res.data.data.comics.pages
                comic.total = res.data.data.comics.total
                window.scrollTo(0,0)
                showToast.value = false
            })
            console.log(data.message)
        }

        onMounted(() => {
            getComicList(comic.page, order.value, keyword)
        })

        onActivated(() => {
            let newKeyword = route.query.keyword;
            if (newKeyword != keyword) {
                comic.message = []
                getComicList(1, order.value, keyword)
            }
        })

        onDeactivated(() => {
            order.value = "UA"
        })

        function changePage() {
            getComicList(comic.page, order.value, keyword)
        }

        return {
            isShowLoadBtn,
            changePage,
            showToast,
            comic,
            order,
            orderAry,
            changeOrder
        }
    },
    methods: {
        setContainer() {
            let width = document.documentElement.clientWidth;
            this.$refs.container.style.width = width + 'px';
        },
    },
    mounted() {
        this.setContainer()
    }
}
</script>

<style scoped>
.comic-list-container {
    background-color: #e1e1e1;
}

.btn-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    margin: 10px;
    font-size: 40px;
    color: #f1929d;
}
</style>